<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .nav-primary {
            background: #0066CC;
            height: 60px;
            padding: 0 28px !important;
        }

        .system-brand {
            font-size: 20px;
            font-weight: 600;
            color: white;
            margin-right: 40px;
            line-height: 60px;
        }

        .nav-item-custom {
            position: relative;
            margin-right: 35px !important;
        }

        .nav-link-custom {
            color: white !important;
            font-size: 16px;
            padding: 0 !important;
            line-height: 60px !important;
            white-space: nowrap;
        }

        .navbar-nav {
            flex-wrap: nowrap;
        }
    </style>
</head>

<body>
    <nav class="nav-primary navbar">
        <div class="container-fluid">
            <span class="system-brand">新闻系统</span>
            <div class="d-flex ms-auto">
                <ul class="navbar-nav flex-row">
                    <li class="nav-item-custom nav-item">
                        <a class="nav-link-custom nav-link" href="/root_home.html">首页</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="card shadow">
            <div class="card-body">
                <h1 class="card-title mb-4" id="newsTitle"></h1>

                <div class="row mb-4">
                    <div class="col-md-6">
                        <p class="text-muted">发布时间：<span id="newsTime" class="fw-bold"></span></p>
                    </div>
                    <div class="col-md-6">
                        <p class="text-muted">发布作者：<span id="newsAuthor" class="fw-bold"></span></p>
                    </div>
                    <div class="col-12">
                        <p class="text-muted">分类：<span id="newsCategory" class="badge bg-primary"></span></p>
                    </div>
                </div>

                <div class="border-top pt-3">
                    <pre id="newsBody" class="p-3 bg-light rounded"
                        style="white-space: pre-wrap; max-height: 60vh; overflow-y: auto"></pre>
                </div>
            </div>
        </div>
    </div>

    <script>
        const getNewsId = () => new URLSearchParams(window.location.search).get('news_id')

        const loadNews = async () => {
            const newsId = getNewsId()
            if (!newsId) return alert('缺少新闻ID')

            try {
                const metaRes = await fetch('/get_one_news', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ news_id: newsId })
                })
                const { title, time, class: category, publisher, path } = await metaRes.json()

                const contentRes = await fetch(path)
                const content = await contentRes.text()

                document.getElementById('newsTitle').textContent = title
                document.getElementById('newsTime').textContent = time.trim()
                document.getElementById('newsAuthor').textContent = publisher
                document.getElementById('newsCategory').textContent = category
                document.getElementById('newsBody').textContent = content

            } catch (error) {
                console.error('加载失败:', error)
                alert('新闻加载失败')
            }
        }

        window.onload = loadNews
    </script>
</body>

</html>